<template>
  <div class="container" ref="mainCon">
    <topTitle :titleText="titleText" :titleExplain="titleExplain"></topTitle>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-form-item label="项目名称" class="row-padding-bottom">
            <el-input
              v-model="filterField.projectName"
              placeholder="请输入项目名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="区域" class="row-padding-bottom">
            <el-cascader
              ref="manageArea"
              v-model="areaId"
              :options="areasOptions"
              @change="getAreaId"
              clearable
              filterable
              :props="{ checkStrictly: true }"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="行业" class="row-padding-bottom">
            <el-select
              v-model="filterField.industryId"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in industryOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="projectName"
            label="项目名称"
          ></el-table-column>
          <el-table-column
            prop="areaName"
            label="区域"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="industryName"
            label="行业"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="endDate"
            label="计划竣工日期"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="delayDate"
            label="延期至(最新)"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'delayProjectList',
  mixins: [scrollTable],
  data() {
    return {
      titleText: '延期项目列表',
      titleExplain: '统计责任区域下所有添加了竣工延期记录的项目清单，以便查看',
      //表格数据
      tableList: [],
      requestUrl: 'api-p/projectdelay/expand/projectdelaylist',
      areaId: '', //区域
      //搜索条件
      filterField: {
        projectName: '', //项目名称
        areaId: '', //区域
        industryId: '', //行业
      },
      isShow: false,
      loading: true, //列表加载
    }
  },
  computed: { ...mapState(['areasOptions', 'industryOptions']) },

  created() {
    //获取行业
    this.getIndustry({})
    //获取区域
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    this.getProject()
  },
  watch: {
    $route(to, from) {
      if (from.path === '/home/monitorPage/constructMonitorHome') {
        this.getProject()
      }
    },
  },
  methods: {
    ...mapActions(['getAreas', 'getIndustry']),

    getProject() {
      if (this.$route.params && this.$route.params.projectName) {
        this.filterField.projectName = this.$route.params.projectName
        this.$nextTick(function () {
          this.$refs.pagination.getTableListData()
        })
      } else {
        this.$nextTick(function () {
          this.$refs.pagination.getTableListData()
        })
      }
    },

    //获取选中的区域最后一级id
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
  },
}
</script>

<style scoped lang="less">
.topTitle {
  height: 67px;
  background-color: #e4ebf1;
  padding-left: 24px;
  font: bold 18px/67px Microsoft YaHei;
}
.mainCon {
  top: 210px;
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}
/deep/ .el-table__header {
  width: 100% !important;
}
/deep/ .el-table__body {
  width: 100% !important;
}
</style>
